<template>
	<div class="mpnews"  >
		<FormItem label="标题">
	        <IInput v-model="form.title" size="large" placeholder="请填写标题" />
	    </FormItem>
	    <FormItem label="子标题">
	        <IInput v-model="form.desc" size="large" placeholder="请填写子标题" />
	    </FormItem>
	    <FormItem  label="封面 ">
		    <IButton icon="ios-cloud-upload-outline" @click="choiseImage">从图片库选择</IButton>
		    <div class="pic" v-show="form.pic" v-bind:style="form.picshow">
		    	<img :src="form.pic">
		    	<div class="mask">
		    		<span v-on:click="editPic" class="editIcon"><Icon type="edit"></Icon></span>
		    		<span v-on:click="delPic" class="delIcon"><Icon type="trash-a"></Icon></span>
		    	</div>
		    </div>
	    </FormItem>
	    <FormItem label="链接地址">
	        <IInput v-model="form.link" size="large" placeholder="点击图文消息跳转链接地址" />
	    </FormItem>
	    <ModalAddImage ref="modalAddImage" :callback="getImage" :fixedNumber="form.fixedNumber"></ModalAddImage>
	    <ModalEditImage ref="modalEditImage" :callback="getImage" :fixedNumber="form.fixedNumber"></ModalEditImage>
	</div>
</template>
<script>
	import Form from 'iview/src/components/form';
	import Input from 'iview/src/components/input';
	import Button from 'iview/src/components/button';
	import Icon from 'iview/src/components/icon'

	import ModalAddImage  from './image/modal-add';
    import ModalEditImage  from './image/modal-edit';

	export default{
		components:{
            'IInput' : Input,
			'IForm' : Form,
			'IButton' : Button,
			'FormItem' : Form.Item,
			ModalAddImage,
			ModalEditImage,
			Icon,
        },
        props: {
			form: {
				type : Object,
				required : true,
			},
			formindex :{
				type : Number
			},
			forms :{
				type : Array
			}
		},
        data () {
            return {
            	
            }
        },
        methods:{
        	//图片库选择
        	choiseImage(){
        		this.$refs.modalAddImage.modal = true;
        	},
        	//获得图片库的图片和选中的图片
        	getImage(url,choiseUrl){
        		this.form.pic = url;
        		this.form.originPic = choiseUrl;
        	},
        	//编辑封面
        	editPic(){
        		this.$refs.modalEditImage.choiseImageUrl = this.form.originPic;
        		this.$refs.modalEditImage.modal = true;
        	},
        	//删除封面
        	delPic(){
        		this.form.pic = '';
        	},
        	//当前form序号改变,调整截图长宽比例
        	changeIndex(index){
        		if(index>0){
        			this.form.fixedNumber = [1,1];
    				this.form.picshow.width = '120px';
        		}else{
        			this.form.fixedNumber = [9,5];
    				this.form.picshow.width = '188px';
        		}
        	}
        },
        watch:{
        	form:function(newValue,oldValue){
        		if(newValue.index==oldValue.index) return false;
        		this.changeIndex(newValue.index);
        	}
        },
	}
</script>
<style>
	.mpnews .pic{margin-top: 15px;display: block;position: relative; }
	.mpnews .pic img{width:100%;height: 100%;}
	.mpnews .pic .mask{position: absolute; left: 0px; top: 0px; opacity: 0;}
	.mpnews .pic:hover .mask{background: rgba(0,0,0,0.7);width: 100%;height: 100%;position: absolute;left: 0px;top: 0px;cursor: pointer;color: white;font-size: 24px;display: show;opacity: 1;z-index: 1;}
	.mpnews .pic .mask .ivu-icon{ line-height: 120px; text-align: center;}
	.mpnews .pic .mask .editIcon{float: left;margin-left: 25px;}
	.mpnews .pic .mask .delIcon{float: right;margin-right: 25px;}
</style>